<template>
	<view class="content">
		<navbar 
			:isHome="true" 
			titleText="首页"
			@navBarAttached="onNavBarAttached" 
		></navbar>
		<view :style="'margin-top:'+navBarHeight+'rpx'">
			<view class="weui-cell" style="background: #fff9eb;">
				<view class="weui-cell__hd">
					<image src="../../static/resource/images/ic_myapp.png" style="display: block;width: 40rpx;height: 40rpx;margin: right 14rpx;"></image>
				</view>
				<view class="weui-cell__bd">
					<text style="color:#be9719;font-size: 13px;">点击右上角“添加到我的小程序”，方便下次找到！</text>
				</view>
				<view class="weui-cell__ft">
					<image src="../../static/resource/images/modal_closer.png" style="display: block;width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
		</view>
		<view v-if="slides && slides.length > 0" class="index-swiper">
			<swiper autoplay :interval="4000" :duration="500">
				<swiper-item v-for="(item,index) in slides" :key="index">
					<image 
						:src="item.pic_image_url" 
						mode="widthFix" 
						show-menu-by-longpress 
						:data-index="index"
					></image>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="nav2s && nav2s.length > 0" class="nav2-list">
			<view class="nav2-list-inner">
				<view 
					v-for="(item,index) in nav2s" 
					:key="index" class="nav2-item" 
					:data-item="item"
					@click="onNavTap"
				>
					<view class="nav2-pic">
						<image :src="item.pic_image_url" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 金刚区 -->
		<view if="navs && navs.length > 0" class="nav-list" >
			<view 
				v-for="(item,index) in navs" 
				:key="index" 
				class="nav-item"
				:data-item="item"
				@click="onNavTap"
			>
				<view class="nav-pic">
					<image :src="item.pic_image_url"></image>
				</view>
				<view class="nav-text" :style="{color:item.color?item.color:''}">
					{{item.title}}
				</view>
			</view>
		</view>
		<!-- 医院列表 -->
		<view class="weui-cells hosp-list">
			<view 
				class="weui-cell hosp-item weui-cell_access"
				v-for="(item,index) in hospitals"
				:key="index"
				:data-item = "item"
				@click="onHosDetail"
			>
			<view class="weui-cell__hd">
				<img 
					class="hosp-avatar" 
					mode="aspectFill"
					:src="item.avatar_url"
					v-imgError = "'../../static/resource/images/avatar.jpg'"
				/>
			</view>
			<view class="weui-cell__bd">
				<view>
					<text class="hosp-name">{{item.name}}</text>
				</view>
				<view class="hosp-line">
					<text class="hosp-rank">{{item.rank}}</text>
					<text class="hops-label">{{item.label}}</text>
				</view>
				<view class="hosp-line">
					<text class="hosp-intro">{{item.intro}}</text>
				</view>
			</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//轮播图的数据
				slides:[] ,
			    //快捷入口2
				nav2s:[],
				//快捷入口多个
				navs:[],
				//医院列表
				hospitals:[],
				navBarHeight:''
			}
		},
		computed:{
			
		},
		async onLoad() {
			//console.log('执行了onload')
			const app = getApp()
			//请求首页信息
			const {data:{area:{id}}} = await app.globalData.utils.request({
				showLoading:true,
				url:'/app/init',
			})
			//通过id 获取当前地区的页面数据
			const {data} = await app.globalData.utils.request({
				url:'/Index/index',
				data:{
					id
				}
			})
			this.slides = data.slides
			this.nav2s = data.nav2s
			this.navs = data.navs
			this.hospitals = data.hospitals			
		},
		methods: {
			//获取navBar的高度
			onNavBarAttached({navBarHeight}){
				console.log('navBarHeight',navBarHeight)
				this.navBarHeight = navBarHeight
				
			},
			//就医陪诊，护理陪护跳转，金刚区的跳转
			onNavTap(e){
				const nav = e.currentTarget.dataset.item
				if(nav.stype === '1') {
					uni.navigateTo({
						url:nav.stype_link
					})
				}
			},
			//医院列表跳转到详情页
			onHosDetail(e){
				const {id} =  e.currentTarget.dataset.item
				uni.navigateTo({
					url:`../hospital/index?hid=${id}`
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fff;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.index-swiper{
		width: 100%;
		overflow: hidden;
		
	}
	
	.index-swiper swiper{
		margin:20rpx 20rpx 0 20rpx;
		height: 320rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}
	
	.index-swiper swiper-item image {
		width: 100%;
		height: 100%;
	}
	
	.nav2-list {
	    
		width: 100%;
		height: 100%;
	}
	.nav2-list-inner{
		margin: 10rpx 15rpx 0 15rpx;
	}
	.nav2-list::after {
	    content: '';
	    display: block;
	    height: 0;
	    line-height: 0;
	    clear: both;
	    visibility: hidden;
	}
	.nav2-item {
	    float: left;
	    margin-top: 20rpx;
	    width: 50%;
	    text-align: center;
	    box-sizing: border-box;
	    padding: 0 5rpx;
	}
	.nav2-pic {
	    width: 100%;
	}
	.nav2-pic image {
	    display: block;
	    width: 100%;
	}
	.nav-list{
		width: 100%;
	}
	.nav-list::after {
	    content: '';
	    display: block;
	    height: 0;
	    line-height: 0;
	    clear: both;
	    visibility: hidden;
	}
	.nav-item {
	    float: left;
	    margin-top: 20rpx;
	    width: 20%;
	    text-align: center;
	    padding: 10rpx 0;
	}
	.nav-pic image {
	    display: block;
	    margin: 0 auto;
	    width: 110rpx;
	    height: 110rpx;
	}
	.nav-text {
	    font-size: 24rpx;
	    font-weight: bold;
	    white-space: nowrap;
	    overflow: hidden;
	}
	
	.hosp-list {
	    margin: 10rpx 0 0 0;
	    background: none;
	}
	.hosp-list::before {
	    display: none;
	}
	.hosp-list::after {
	    display: none;
	}
	
	.hosp-item {
	    -webkit-box-align: stretch;
	    -webkit-align-items: stretch;
	    align-items: stretch;
	    padding: 20rpx;
	    margin: 20rpx;
	    border-radius: 10rpx;
	    overflow: hidden;
	    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);
	}
	.hosp-item::before {
	    display: none;
	}
	.hosp-item::after {
	    display: none;
	}
	.hosp-name {
	    font-weight: bold;
	    font-size: 34rpx;
	}
	.hosp-avatar {
	    display: block;
	    width: 200rpx;
	    height: 180rpx;
	    border-radius: 10rpx;
	    overflow: hidden;
	    margin-right: 20rpx;
	}
	.hosp-line {
	    margin-top: 5rpx;
	}
	.hosp-line text {
	    font-size: 26rpx;
	}
	.hosp-rank {
	    font-weight: bold;
	    color: #0bb585;
	    margin-right: 15rpx;
	}
	.hosp-label {
	    font-weight: bold;
	    color: #0ca7ae;
	    margin-right: 15rpx;
	}
	.hosp-intro {
	    color: #999999;
	}
</style>
